<template>
	<view class="smart-page">
		<!-- 页面标题头begin -->
		<view class="smart-page-head">
			<view class="smart-page-head-title">input输入控件</view>
		</view>
		<!--页面标题头end -->
		
		<view>
			<view>可自动获取焦点</view>
			<view><input class="smart-input" focus="true" placeholder="请输入手机号"></view>
		</view>

		<view>
			<view class="input-label">右下角显示搜索</view>
			<view><input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容"></view>
		</view>

		<view>
			<view>控制最大输入长度</view>
			<view><input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容"></view>
		</view>

		<view>
			<view>密码输入</view>
			<view><input class="smart-input" :password="true" confirm-type="search" placeholder="请输入密码"></view>
		</view>

		<view>
			<view>可查看密码</view>
			<view class="wrapper">
				<input class="smart-input" :password="showPassword" placeholder="请输入密码" />
				<image class="eye" src="../../../static/eye.png" @click="changePassword()"></image>
			</view>
		</view>

		<view>
			<view>同步获取</view>
			<view><input class="smart-input" @input="onKeyInput"></view>
			<view><text>{{inputValue}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				inputValue: '' // 修复：初始化inputValue
			}
		},
		methods: {
			changePassword() {
				console.log('点击....');
				this.showPassword = !this.showPassword;
			},
			onKeyInput(event) {
				console.log(event.detail.value);
				this.inputValue = event.detail.value;
			}
		}
	}
</script>

<style>
	.smart-page-head {
		padding: 20px 0;
		text-align: center;
		margin-bottom: 20px;
	}
	
	.smart-page-head-title {
		font-size: 24px;
		font-weight: 600;
		color: darkgray;
		display: inline-block;
		position: relative;
		padding-bottom: 8px;
	}
	
	.smart-page-head-title::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background-color: lightgray;
	}
	.smart-page {
		padding: 20rpx;
	}
	
	.smart-input {
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 20rpx;
		margin: 20rpx 0;
		height: 80rpx;
		box-sizing: border-box;
	}
	
	.input-label {
		margin-top: 40rpx;
	}
	
	.wrapper {
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.wrapper .smart-input {
		flex: 1;
		padding-right: 80rpx; /* 为眼睛图标留出空间 */
	}
	
	.eye {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
	}
</style>